<template>
	<view>
		<u-popup :show="show" mode="bottom" :round="30" :closeOnClickOverlay="true" @close="close">
			<view class="ftx-prime">
				<view class="ftx-prime-header u-flex u-flex-center">
					<template v-if="orderType==3">会员开通</template>
					<template v-if="orderType==4">会员升级</template>
					<template v-if="orderType==5">会员续费</template>
				</view>
				
				<view class="ftx-prime-main u-flex u-flex-column">
					<view class="ftx-prime-item u-flex">
						<view class="title u-flex u-flex-items-center">会员等级</view>
						<view class="value">{{ primeInfo.grade_type_display }}</view>
					</view>
					
					<view class="ftx-prime-item u-flex">
						<view class="title u-flex u-flex-items-center">会员权益</view>
						<view class="value">
							<rich-text :nodes="primeInfo.rights_info"></rich-text>
						</view>
					</view>
					
					<view class="ftx-prime-item u-flex">
						<view class="title u-flex u-flex-items-center">等级售价</view>
						<view class="value u-flex">
							<view v-if="primeInfo.price > 0">
								<text class="bold">{{ primeInfo.price }}</text>
								<text>元</text>
							</view>
							<view v-else>
								<text class="bold">限时免费开通</text>
							</view>
							
							<view style="margin-left: 20rpx;" v-if="primeInfo.order_type==4">
								<text>应退（已扣减）：</text>
								<text class="bold">{{ primeInfo.refundInfo.leftAmt }}</text>
								<text>元</text>
							</view>
						</view>
					</view>
					
					<view class="ftx-prime-item u-flex">
						<view class="title u-flex u-flex-items-center">开通时长</view>
						<view class="value">
							<text class="bold">{{ primeInfo.days }}</text>
							<text>天</text>
						</view>
					</view>
					
					<view class="ftx-prime-item u-flex">
						<view class="title u-flex u-flex-items-center">到期时间</view>
						<view class="value">{{ primeInfo.expire_date_format }}</view>
					</view>
					
					<view class="ftx-prime-btn u-flex u-flex-items-center">
						<u-text align="center" :size="34" color="#ffffff" iconStyle="font-size:50rpx;color:#FFFFFF" prefixIcon="weixin-fill" :text="'微信支付 '+ primeInfo.price +' 元'" @click="createAndPay" v-if="primeInfo.price>0"></u-text>
						<u-text align="center" :size="34" color="#ffffff" text="免费开通" @click="createAndPay" v-else></u-text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { userPrimePrecheck,orderUnionCreate,orderUnionPayment } from '@/api/api.js'
	export default {
		name:"ftx-prime",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			levelId: {
				type: Number,
				default: 0
			},
			orderType: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				primeInfo: {
					id: 0,
					expire_date: '',
					expire_date_format: '',
					grade_type: 0,
					grade_type_display: '',
					rights_info: '',
					status: 0,
					order_type: 0
				}
			};
		},
		methods: {
			fail(err) {
				this.$emit("fail",err)
			},
			close() {
				this.$emit("close")
			},
			success(res) {
				console.log(res,this.primeInfo)
				this.$emit("success",this.primeInfo)
			},
			createAndPay() {
				uni.showLoading({
					title: '提交中'
				})
				
				orderUnionCreate(this.primeInfo).then(res => {
					uni.showToast({
					    title: '下单成功',
					    icon: 'success'
					})
					orderUnionPayment(res.data.order_id).then(payres => {
						// 支付成功
						if ( payres.data.pay_status == 1 ) {
							var _this = this
							return uni.showToast({
							    title: '开通成功',
							    icon: 'success',
								success() {
									_this.success()
								}
							})
						}
						
						if ( payres.data.pay_params ) {
							uni.requestPayment({
								provider: 'wxpay',
								...payres.data.pay_params,
								success: () => {
									var _this = this
									setTimeout(function(){
										_this.success()
									},2000)
									return uni.showToast({
										title: "支付成功~",
									})
								},
								fail: () => {
									var _this = this
									setTimeout(function(){
										_this.fail()
									},2000)
									return uni.showToast({
										title: "支付失败~",
										icon: 'none'
									})
								}
							})
						}
					})
				})
			}
		},
		mounted() {
			
		},
		watch: {
			show: function(newVal,oldVal) {
				if ( newVal == true ) {
					userPrimePrecheck({orderType: this.orderType,levelId: this.levelId}).then(res => {
						this.primeInfo = res.data
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.ftx-prime {
	.ftx-prime-header {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1px solid #f2f2f2;
	}
	.ftx-prime-main {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		.ftx-prime-item {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			.title {
				width: 140rpx;
				color: #666;
			}
			.value {
				flex: 1;
			}
			.bold {
				color: #c14b09;
				font-weight: bold;
				font-size: 40rpx;
				margin-right: 8rpx;
			}
		}
		.ftx-prime-btn {
			padding: 20rpx 0;
			background-color: #44b549;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin: 30rpx 0;
		}
	}
}
</style>